import { useUpdateEffect } from 'ahooks';
import { App } from 'antd';
import { useRef, useState } from 'react';
import { SelectSourceRef, SourceSelectModalProps } from './interface';
import { OpenModal } from './Modal';
import { ModalContent } from './ModalContent';

// 资源组件选择
export function SourceSelectModal({
  openDep,
  onChange,
  value,
  preSet,
  params,
  columnsRender,
  menuLeftWidth,
  modalWidth = 1136,
  ...props
}: SourceSelectModalProps) {
  const [open, setOpen] = useState(false);
  const {
    message,
    modal: { confirm },
  } = App.useApp();
  useUpdateEffect(() => {
    setOpen(Boolean(openDep));
  }, [openDep]);
  const ref = useRef<SelectSourceRef>(null);

  return (
    <OpenModal
      width={modalWidth}
      open={open}
      onCancel={() => {
        setOpen(false);
      }}
      style={{ minWidth: modalWidth }}
      onOk={() => {
        const list = ref.current?.submit();
        const activeMenuKey = ref.current?.getActiveMenuKey();
        console.log('list', list);
        if (!list || list.length < 1) {
          if (preSet === '课件') {
            message.warning('请选择课件');
            return;
          } else {
            message.warning('请选择学习内容');
            return;
          }
        }

        onChange?.(ref.current?.submit(), activeMenuKey);
        setOpen(false);
      }}
      {...props}
    >
      <ModalContent
        ref={ref}
        params={params}
        modalWidth={modalWidth}
        defaultValue={value}
        preSet={preSet}
        columnsRender={columnsRender}
        menuLeftWidth={menuLeftWidth}
      ></ModalContent>
    </OpenModal>
  );
}
